<template>
    <div class="shop-right">
        <!-- 内容 -->
        <div class="page-preview">
            <cell-tip tip="一键设置店铺风格，让你的店铺更加美观" />
            <p class="page-h3">当前风格示例</p>
            <div class="preview-box">
                <div class="preview-item">
                    <div class="preview-bg" :style="{ color: nav_text_color, background: bg_color }">
                        <img :src="proxy.imgUrl + 'tenant_593be52a46f869eea8b31d146d21de7a/album/202304/20230413_b1ed5adafc642b6b771dc2806949aa40.png'" />
                        <div class="preview-item__title">
                            <el-icon :color="nav_text_color" size="14px"> <ArrowLeft /> </el-icon>商品详情
                        </div>
                    </div>
                    <img src="https://saas.huashushop.com/saas/img/style1.jpg" />
                    <!-- <div class="main-price">
                        <em class="main-price__icon" :style="{ color: colorObjs.main_price }">¥</em>
                        <span class="main-price__num" :style="{ color: colorObjs.main_price }">12</span>
                    </div> -->
                    <div class="preview-foot">
                        <div class="preview-foot-cart" :style="{ color: colorObjs.vice_text, background: colorObjs.vice_bg }">加入购物车</div>
                        <div class="preview-foot-buy" :style="{ color: colorObjs.main_text, background: colorObjs.main_bg }">立即购买</div>
                    </div>
                </div>
                <div class="preview-item">
                    <div class="preview-bg" :style="{ color: nav_text_color, background: bg_color }">
                        <img :src="proxy.imgUrl + 'tenant_593be52a46f869eea8b31d146d21de7a/album/202304/20230413_b1ed5adafc642b6b771dc2806949aa40.png'" />
                        <div class="preview-item__title">分类</div>
                    </div>
                    <img src="https://saas.huashushop.com/saas/img/style2.jpg" />
                    <div class="sku-checkbox">
                        <el-icon :color="colorObjs.main_bg" size="16px">
                            <SuccessFilled />
                        </el-icon>
                    </div>
                    <div class="sku-checkbox__two">
                        <el-icon :color="colorObjs.main_bg" size="18px">
                            <SuccessFilled />
                        </el-icon>
                    </div>
                    <p class="preview-cart__price" :style="{ color: colorObjs.main_price }"><em>￥</em>12</p>
                    <div class="preview-submit flexs">
                        <div class="preview-submit__left">
                            <el-icon :color="colorObjs.main_bg" size="18px"> <SuccessFilled /> </el-icon><span style="margin-left: 6px">全选</span>
                        </div>
                        <div class="preview-submit__right">
                            <span class="preview-submit__right-one"
                                >合计: <span class="preview-submit__price" :style="{ color: colorObjs.main_price }"><em>￥</em>12</span></span
                            >
                            <span class="preview-submit__right-btn" :style="{ background: colorObjs.main_price, color: colorObjs.main_text }">立即购买</span>
                        </div>
                    </div>
                </div>
                <div class="preview-item">
                    <div class="preview-bg" :style="{ color: nav_text_color, background: bg_color }">
                        <img :src="proxy.imgUrl + 'tenant_593be52a46f869eea8b31d146d21de7a/album/202304/20230413_b1ed5adafc642b6b771dc2806949aa40.png'" />
                        <div class="preview-item__title">
                            <el-icon :color="nav_text_color" size="14px"> <ArrowLeft /> </el-icon>结算详情
                        </div>
                    </div>
                    <img src="https://saas.huashushop.com/saas/img/style3.jpg" />
                    <div class="preview-slider" :style="{ background: colorObjs.main_bg }"></div>
                    <span class="discount-num" :style="{ color: colorObjs.main_price }">1</span>
                    <span class="discount-weight" :style="{ color: colorObjs.main_price }">1.5</span>
                    <span class="discount-num-two" :style="{ color: colorObjs.main_price }">1</span>
                    <div class="discount-trans" :style="{ borderColor: colorObjs.main_bg }">
                        <p class="trans-name">冷链</p>
                        <p class="trans-price">最低预估<em>￥</em>3</p>
                        <div class="trans-sign">
                            <div class="trans-sign__box" :style="{ borderBottomColor: colorObjs.main_bg }"></div>
                            <div class="trans-sign__icon">
                                <el-icon color="#fff" size="14px">
                                    <Check />
                                </el-icon>
                            </div>
                        </div>
                    </div>
                    <div class="discount-trans trans-two" :style="{ borderColor: colorObjs.main_bg }">
                        <p class="trans-name">德邦空配</p>
                        <p class="trans-price"><em>￥</em>3</p>
                        <div class="trans-sign">
                            <div class="trans-sign__box" :style="{ borderBottomColor: colorObjs.main_bg }"></div>
                            <div class="trans-sign__icon">
                                <el-icon color="#fff" size="14px">
                                    <Check />
                                </el-icon>
                            </div>
                        </div>
                    </div>
                    <div class="discount-price">
                        <span class="main-price__text">合计：</span>
                        <span class="main-price__icon" :style="{ color: colorObjs.main_price }">¥</span>
                        <span class="main-price__num" :style="{ color: colorObjs.main_price }">12</span>
                    </div>
                    <div class="discount-btn" :style="{ color: colorObjs.main_text, background: colorObjs.main_bg }">提交订单</div>
                </div>
            </div>
        </div>
        <!-- 右侧 -->
        <div class="preview-edit">
            <div class="preview-edit__head">
                <div class="preview-edit__head-one flexs">
                    <p>风格设置</p>
                </div>
                <div class="preview-edit__head-dec">专业设计师设计众多风格搭配，任你选择</div>
            </div>
            <div class="preview-edit__body">
                <p class="hot-item__title">主题色</p>
                <div class="preview-themes">
                    <div
                        :class="[{ actives: cur === index }, 'themes-item']"
                        :style="{ background: item.main_price }"
                        v-for="(item, index) in colors"
                        :key="item.main_price"
                        @click="selectTheme(item, index)"
                    ></div>
                </div>
                <div class="preview-color flexs">
                    <p class="preview-color__text">
                        顶部栏背景色<el-popover
                            placement="right-start"
                            :width="200"
                            trigger="hover"
                            content="可自定义修改小程序顶部栏背景颜色，修改好后必须重新审核发布才能生效"
                        >
                            <template #reference>
                                <el-icon color="#C1C1C1" :size="18">
                                    <QuestionFilled />
                                </el-icon>
                            </template>
                        </el-popover>
                    </p>
                    <el-color-picker v-model="bg_color" @change="changeColor" />
                </div>
                <div class="preview-color cls-between">
                    <div class="label-con" style="display: flex; align-items: center; flex: 1">
                        文本样式<el-popover
                            placement="right-start"
                            :width="200"
                            trigger="hover"
                            content="可自定义修改小程序顶部栏文字颜色，修改好后必须重新审核发布才能生效"
                        >
                            <template #reference>
                                <el-icon color="#C1C1C1" :size="18">
                                    <QuestionFilled />
                                </el-icon>
                            </template>
                        </el-popover>
                    </div>
                    <div class="cls-between">
                        <div class="item-con" :class="nav_text_color === 'white' ? 'item-con-active' : ''" @click="nav_text_color = 'white'">白色</div>
                        <div class="item-con" :class="nav_text_color === 'black' ? 'item-con-active' : ''" @click="nav_text_color = 'black'">黑色</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="foot-btn flexs-center">
        <el-button type="primary" size="large" :loading="btn_loading" @click="handleConfirm">保存</el-button>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import { SuccessFilled, Check, QuestionFilled, ArrowLeft } from "@element-plus/icons-vue"
import CellTip from "@components/cell-tip.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getConfigs()
})

function getConfigs() {
    proxy.$axios
        .get("decorate/style")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data.style
                bg_color.value = result.bg_color
                cur.value = result.cur
                colorObjs.value = result.colorObjs
                nav_text_color.value = result.nav_text_color
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

/**
 * 颜色选择
 * @param {Object} colorObjs 选择的风格
 * @param {Array} colors 风格数组
 * @param {Number} cur 风格数组索引
 */
const colorObjs = ref({})
const cur = ref(0)
const colors = ref([
    {
        main_price: "#0AC393",
        main_text: "#fff",
        main_bg: "#0AC393",
        tag_text: "#0AC393",
        tag_bg: "#E6F8E6",
        vice_bg: "#000E37",
        vice_text: "#fff",
    },
    {
        main_price: "#FF4444",
        main_text: "#fff",
        main_bg: "#ff4444",
        tag_text: "#cf0000",
        tag_bg: "#fff2f2",
        vice_bg: "#ffcccc",
        vice_text: "#cf0000",
    },
    {
        main_price: "#ff5e15",
        main_text: "#fff",
        main_bg: "#ff5e15",
        tag_text: "#ff5e15",
        tag_bg: "#FFEDE6",
        vice_bg: "#FF9300",
        vice_text: "#fff",
    },
    {
        main_price: "#ff547b",
        main_text: "#fff",
        main_bg: "#ff547b",
        tag_text: "#ff547b",
        tag_bg: "#FFF2F5",
        vice_bg: "#FFE6E8",
        vice_text: "#ff547b",
    },
    {
        main_price: "#FF4444",
        main_text: "#fff",
        main_bg: "#FF4444",
        tag_text: "#CF0000",
        tag_bg: "#FFF2F2",
        vice_bg: "#555555",
        vice_text: "#fff",
    },
    {
        main_price: "#63be72",
        main_text: "#fff",
        main_bg: "#63be72",
        tag_text: "#6CBE72",
        tag_bg: "#F0F8F0",
        vice_bg: "#E1F4E3",
        vice_text: "#6CBE72",
    },
    {
        main_price: "#4a90e2",
        main_text: "#fff",
        main_bg: "#4a90e2",
        tag_text: "#0080FF",
        tag_bg: "#E5F2FF",
        vice_bg: "#D6E9FC",
        vice_text: "#0080FF",
    },
])
const selectTheme = (item, index) => {
    if (cur.value === index) return
    cur.value = index
    colorObjs.value = item
    bg_color.value = item.main_bg
}

// 修改顶部栏背景颜色
const bg_color = ref("")
const nav_text_color = ref("white") // 修改顶部栏文字颜色
const changeColor = (val) => {
    bg_color.value = val ? val : colors.value[0].main_bg
}

// 保存
const btn_loading = ref(false)
const handleConfirm = () => {
    let objs = {
        bg_color: bg_color.value,
        cur: cur.value,
        colorObjs: colorObjs.value,
        nav_text_color: nav_text_color.value,
    }
    btn_loading.value = true
    proxy.$axios
        .post("decorate/style", {
            style: JSON.stringify(objs),
        })
        .then((res) => {
            btn_loading.value = false
            if (res.data.code == 0) {
                proxy.$message({ message: "保存成功！", type: "success" })
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            btn_loading.value = false
        })
}
</script>
<script>
export default {
    name: "DecoShopStyle",
}
</script>

<style lang="less" scoped>
.preview-box {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;

    .preview-item {
        margin-left: 60px;
        width: 230px;
        position: relative;
        border: 1px solid #ededed;
        display: flex;
        flex-direction: column;

        &:first-child {
            margin-left: 0;
        }

        .preview-bg {
            height: 54px;
            width: 228px;
            overflow: hidden;
            position: relative;

            .preview-item__title {
                font-size: @font-size-sm;
                position: absolute;
                top: 32px;
                left: 10px;
                display: flex;
                align-items: flex-end;
            }
        }

        .preview-slider {
            width: 24px;
            height: 2px;
            position: absolute;
            left: 45px;
            top: 79px;
            content: "";
            border-radius: @radius-sm;
            overflow: hidden;
        }

        .sku-checkbox {
            position: absolute;
            left: 13px;
            top: 88px;
        }

        .sku-checkbox__two {
            position: absolute;
            left: 13px;
            top: 126px;
        }
        .preview-cart__price {
            position: absolute;
            left: 86px;
            top: 142px;
            em {
                font-size: @font-size-sm;
            }
        }

        .preview-submit {
            position: absolute;
            left: 8px;
            top: 443px;
            right: -4px;
            padding-bottom: 6px;

            .preview-submit__left {
                flex: none;
                display: flex;
                align-items: center;
                font-size: @font-size-sm;
            }

            .preview-submit__right {
                flex: none;
                transform: scale(0.83);

                .preview-submit__right-one {
                    font-size: @font-size-md;
                    margin-top: 6px;
                }

                .preview-submit__price {
                    font-size: 18px;

                    em {
                        font-size: @font-size-md;
                    }
                }

                .preview-submit__right-btn {
                    margin-left: 10px;
                    font-size: @font-size-xs;
                    padding: 8px 14px;
                    border-radius: 999px;
                    overflow: hidden;
                }
            }
        }

        .discount-price {
            position: absolute;
            left: 88px;
            top: 480px;

            .main-price__text {
                font-size: @font-size-sm;
                color: @gray-8;
            }
        }

        .discount-btn {
            position: absolute;
            left: 142px;
            top: 469px;
            font-weight: 500;
            line-height: 40px;
            width: 100px;
            transform: scale(0.612);
            border-radius: 20px;
            text-align: center;
        }

        .discount-weight {
            font-size: @font-size-sm;
            position: absolute;
            left: 98px;
            top: 292px;
        }

        .discount-num {
            font-size: @font-size-sm;
            position: absolute;
            left: 59px;
            top: 292px;
        }
        .discount-num-two {
            font-size: @font-size-sm;
            position: absolute;
            left: 48px;
            top: 342px;
        }

        .discount-trans {
            transform: scale(0.72);
            position: absolute;
            left: 0px;
            top: 175px;
            border: 1px solid #fff;
            color: #000e37;
            border-radius: @radius-md;
            padding: 6px 6px 4px;
            font-size: @font-size-sm;
            width: 110px;

            .trans-name {
                margin-bottom: 4px;
            }

            .trans-sign {
                position: absolute;
                right: 0;
                bottom: 0;

                .trans-sign__box {
                    width: 0px;
                    height: 0px;
                    border-bottom: 24px solid #0ac393;
                    border-left: 24px solid transparent;
                }

                .trans-sign__icon {
                    position: absolute;
                    right: 1px;
                    top: 9px;
                }
            }
        }
        .trans-two {
            top: 233px;
            padding: 1px 6px 4px;
        }

        .sku-item {
            position: absolute;
            left: 79px;
            top: 224px;
            font-size: @font-size-xs;
            transform: scale(0.83);
            border-radius: 5px;
            width: 50px;
            height: 24px;
            line-height: 24px;
            text-align: center;

            &.discount-tag {
                left: 68px;
                top: 210px;
                transform: scale(0.7);
            }
        }

        .main-price {
            position: absolute;
            left: 10px;
            top: 288px;
            display: flex;
            align-items: flex-end;
            font-weight: 500;
        }

        .main-price__vip {
            line-height: 20px;
            width: 40px;
            height: 18px;
            font-size: @font-size-sm;
            text-align: center;
            border-radius: 8px;
            transform: scale(0.83);
        }

        .preview-foot {
            position: absolute;
            left: 76px;
            top: 474px;
            font-weight: 500;
            display: flex;
            transform: scale(0.83);

            .preview-foot-cart {
                font-size: @font-size-sm;
                flex: none;
                color: #fff;
                width: 80px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                border-top-left-radius: 18px;
                border-bottom-left-radius: 18px;
                background-color: #4b93fa;
            }

            .preview-foot-buy {
                font-size: @font-size-sm;
                color: #fff;
                flex: none;
                width: 80px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                border-top-right-radius: 18px;
                border-bottom-right-radius: 18px;
                background-color: #999;
            }
        }
    }

    .main-price__icon {
        font-size: @font-size-xs;
    }

    .main-price__num {
        font-size: 16px;
    }
}

.hot-item__title {
    font-size: @font-size-md;
    color: @gray-8;
    padding: @padding-sm @padding-md;
}

.item-con {
    color: #323232;
    padding: 7px 14px;
    border: 1px solid #ebedf0;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.item-con-active {
    color: #4b93fa !important;
    background-color: #edf4ff !important;
    border: 1px solid #4b93fa;
}

.label-con {
    flex: none;
    width: 82px;
    font-size: 14px;
    padding-right: 10px;
    color: @gray-7;
}

.preview-color {
    padding: 0 @padding-md @padding-sm;

    .preview-color__text {
        color: @gray-7;
        display: flex;
        align-items: center;
    }

    .p-popover {
        font-size: @font-size-md;
        color: #595961;
        margin: @margin-xs 0px;
    }

    .preview-color {
        margin-top: @margin-xs;
    }
}

.preview-themes {
    display: flex;
    flex-flow: row wrap;
    margin: @margin-sm @margin-md;

    .themes-item {
        margin: 0 @margin-md @margin-md 0px;
        width: 20px;
        height: 20px;
        cursor: pointer;

        &.actives {
            outline: 1px solid @themes;
            outline-offset: 2px;
        }
    }
}

.page-h3 {
    padding: 0 0 @padding-xl;
    font-size: @font-size-md;
    color: @gray-8;
}

.shop-right {
    flex: 1;
    display: flex;
    align-items: flex-start;
    height: calc(100vh - 120px);

    .page-preview {
        flex: 1;
        background-color: #fff;
        margin-right: @margin-sm;
        position: relative;
        background-color: #fff;
        height: 100%;
        min-width: 850px;
        padding: @padding-mdl;
    }

    .preview-edit {
        flex: none;
        width: 376px;
        height: 100%;
        background-color: #fff;

        .preview-edit__head {
            border-bottom: 1px solid #f2f4f6;
            padding: @padding-lg @padding-md;

            .preview-edit__head-one {
                font-size: 18px;
                font-weight: bold;
                color: @gray-8;
            }

            .preview-edit__head-dec {
                font-size: @font-size-md;
                color: @gray-6;
                margin-top: @margin-sm;
            }
        }
    }
}
</style>
